<template>
  <div class="dashboard">
    <!-- 卡片行 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>总资产</span>
          </div>
          <div class="dashboard-card-content">
            <h2>{{ totalAssets }}</h2>
            <p>更新于今天</p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>收入</span>
          </div>
          <div class="dashboard-card-content">
            <h2>{{ income }}</h2>
            <p>本月累计收入</p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>支出</span>
          </div>
          <div class="dashboard-card-content">
            <h2>{{ expenses }}</h2>
            <p>本月累计支出</p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>收益率</span>
          </div>
          <div class="dashboard-card-content">
            <h2>{{ returnRate }}%</h2>
            <p>本年收益率</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 简单图表 -->
    <div class="chart-section">
      <el-card>
        <div slot="header" class="clearfix">
          <span>资产变化趋势</span>
        </div>
        <div id="chart" />
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      totalAssets: '¥1,500,000',
      income: '¥50,000',
      expenses: '¥30,000',
      returnRate: 12.5
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {
          text: '资产变化趋势'
        },
        tooltip: {},
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {},
        series: [
          {
            name: '总资产',
            type: 'line',
            data: [1500000, 1550000, 1600000, 1620000, 1640000, 1670000]
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-card-content {
  text-align: center;
}

.chart-section {
  margin-top: 20px;
}

#chart {
  width: 100%;
  height: 400px;
}
</style>
